<script setup lang="ts">
import { computed } from 'vue'
import { Todo } from '../App.vue'
interface Props {
  list: Todo[]
}
// 定义 props 接收父组件传过来的数组
const props = defineProps<Props>()
// 计算未完成任务的数量
// 🚨注意点：记得 return 返回计算结果
const leftCount = computed(() => {
  return props.list.filter((item) => !item.done).length
})
</script>

<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ leftCount }}</strong> item left
    </span>
    <ul class="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button>
  </footer>
</template>
